<template>
  <div class="container">

    <div>
      <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
        <el-menu-item index="1">处理中心</el-menu-item>
        <el-menu-item index="2">处理中心</el-menu-item>
        <el-menu-item index="3">处理中心</el-menu-item>
        <el-menu-item index="4">处理中心</el-menu-item>
<!--        <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>-->
      </el-menu>
    </div>

    <!-- 大图部分 -->
    <div class="main-image">
      <el-card>
        <img :src="require(`@/assets/home1.jpg`)" alt="大图">
      </el-card>
    </div>

    <!-- 三部分内容在同一行展示 -->
    <div class="main-container">
      <!-- 左侧站点资讯 -->
      <div class="site-info" style="flex: 1;">
        <h2>站点资讯</h2>
        <ul>
          <li>资讯1</li>
          <li>资讯2</li>
          <!-- 添加更多资讯 -->
        </ul>
      </div>

      <!-- 中间滚动屏 -->
      <div class="scroll-screen" style="flex: 2;">
        <h2>精彩瞬间</h2>
        <!-- 这里放置滚动屏内容，例如使用Element UI的Carousel组件 -->
        <el-carousel :interval="4000" arrow="always">
          <el-carousel-item v-for="item in carouselItems" :key="item.id">
            <img :src="require(`@/assets/${item.imageUrl}`)" alt="滚动屏图片">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 右侧新闻动态 -->
      <div class="news" style="flex: 1;">
        <h2>新闻动态</h2>
        <ul>
          <li>新闻1</li>
          <li>新闻2</li>
          <!-- 添加更多新闻 -->
        </ul>
      </div>
    </div>

    <!-- 在线咨询功能 -->
    <div class="online-chat">
      <h2>在线咨询</h2>
      <!-- 在这里添加你的在线咨询组件或表单 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      carouselItems: [
        { id: 1, imageUrl: 'home1.jpg' },
        { id: 2, imageUrl: 'home2.jpg' },
        // 添加更多滚动屏图片项
      ],
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<style>
/* 根据需要添加样式 */
.main-image img {
  width: 100%;
  height: 600px;
}

.site-info, .news, .online-chat {
  margin: 20px;
}

.main-container {
  display: flex;
}

.scroll-screen {
  /* 根据需要添加样式 */
  text-align: center;
}

.scroll-screen img {
  max-width: 100%;
  height: auto;
}

.el-card__body {
  padding: 0;
}
</style>
